import React, { useState, useEffect } from 'react';
import { EditableProTable, ProCard, ProFormField, ProFormRadio } from '@ant-design/pro-components';
import moment from 'moment';
import CompanyName from '@/components/CompanyName';

const columns = [
  {
    title: '业务编号',
    dataIndex: 'service_code',
    key: 'service_code',
  },
  {
    title: '公司名称',
    width: 200,
    dataIndex: 'company_name',
    key: 'company_name',
    render: (_, row) => (
      <CompanyName
        row={{ ...row, name: row?.company_name ?? row?.name, id: row?.company_id ?? row?.id }}
        reload={() => {}}
      />
    ),
  },
  {
    title: '公司类型',
    dataIndex: 'classify_name',
    key: 'classify_id',
  },
  {
    title: '月收费',
    dataIndex: 'unit_price',
    key: 'unit_price',
  },
  {
    title: '报送日期',
    dataIndex: 'submit_date',
    key: 'submit_date',
    render: (text, row) => {
      return (
        <span className="oneline">
          {row.submit_date ? moment(row.submit_date).format('YYYY-MM-DD') : ''}
        </span>
      );
    },
  },
  {
    title: '区域名称',
    dataIndex: 'area_name',
    key: 'area_id',
  },
  {
    title: '记账会计',
    dataIndex: 'creator_name',
    key: 'creator_name',
  },
  {
    title: '凭证日期',
    dataIndex: 'voucher_date',
    key: 'voucher_date',
    valueType: 'dateMonth',
  },
];

function Mutipledit(props) {
  return (
    <div style={{ margin: -12 }}>
      <EditableProTable
        rowKey="id"
        columns={[
          ...columns?.map((it) => ({
            ...it,
            editable: false,
          })),
          {
            title: '凭证条码号',
            dataIndex: 'voucher_barcode',
            key: 'voucher_barcode',
            width: 160,
          },
        ]}
        recordCreatorProps={false}
        {...props}
      />
    </div>
  );
}

export default Mutipledit;
